<template>
    <div style="color: blue; font-size: 32px">vue-element-plus-admin</div>
    <hr />
    <div>
        <h1 :class="styles['title']">Title - {{ $t("common.about") }} - {{ $t(`${_name}`) }}</h1>
    </div>

    <hr />
    <h3>下面是组件 TComponents 内容</h3>
    <hr style="border-style: dashed" />
    <!-- <TComponent01 /> -->
    <!-- <TComponent02 /> -->

    <hr />
    <h3>下面是组件 VComponents 内容</h3>
    <hr style="border-style: dashed" />
    <!-- <VComponent01 /> -->
    <!-- <VComponent02 /> -->

    <hr />
    <h3>下面是组件 SwitchDark 内容</h3>
    <hr style="border-style: dashed" />
    <div>
        <SwitchDark></SwitchDark>
    </div>

    <SwitchExample />

    <CustomSwitch v-model="isDark"></CustomSwitch>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDark } from "@vueuse/core";
import { TComponent01, TComponent02 } from "@sfx-vue-lib/components";
import { VComponent01, VComponent02 } from "@sfx-vue-lib/components";
import { CustomSwitch } from "@sfx-vue-lib/components";
import { SwitchDark } from "@sfx-vue-lib/components";
import styles from "./styles/t.module.scss";
import SwitchExample from "#/widgets/SwitchExample.vue";

const isDark = useDark();

const _name = "common.name";

// {{END}}
</script>

<script lang="ts">
// import { defineComponent } from "vue";
// import { SwitchDark } from "@sfx-vue-lib/components";

// export default defineComponent({
//     components: {
//         SwitchDark,
//     },
// });
</script>

<style lang="css" scoped>
.v-component01 {
    color: brown;
    font-size: 16px;
}

.switch-dark {
    color: blueviolet;
    font-size: 32px;
}

.custom-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: #dcdfe6;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-switch.is-checked {
    background-color: #409eff;
}

.custom-switch__core {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.3s;
}

.custom-switch.is-checked .custom-switch__core {
    transform: translateX(20px);
}
</style>
